<template>
	<div class="navigation">
		<div class="menu-button" :class="showNav ? 'menu-on' : 'menu-off'" @click.stop="showNav = !showNav">
			<div class="burger">
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<div class="nav-page" :class="{ show_page: showNav }">
			<div class="logo"><img src="../assets/common/logo.png" alt="logo"></div>
			<ul id="nav">
				<li class="navitem" v-for="(item,index) of nav" :key="index" @mouseenter="beginAni" @mouseleave="endAni">
					<a class="nav-a" :href="item.url" target="_self"><span>{{item.text}}</span></a>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			showNav: false,
			nav:[
				{url:'index.html',text:'首页'},
				{url:'ItemList.html',text:'产品'},
				{url:'detail.html',text:'详情'},
				{url:'ShoppingCart.html',text:'购物车'},
				{url:'order.html',text:'订单'},
				{url:'login.html',text:'登录'}
			],
			timer:null
		};
	},
	methods:{
		beginAni(){
			event.target.classList.remove('leave-top','leave-bottom');
				if(event.offsetY<30){
					event.target.classList.add('from-top');
				}else{
					event.target.classList.add('from-bottom');
				}
		},
		endAni(){
			event.target.classList.remove('from-top','from-bottom');
			if(event.offsetY<30){
				event.target.classList.add('leave-top');
			}else{
				event.target.classList.add('leave-bottom');
			}
		}
	}
};
</script>

<style lang="less">
@import '../utils/css/animate.css';
.menu-button {
	height: 50px;
	width: 50px;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 20px;
	top: 20px;
	z-index: 999;
	cursor: pointer;
	&.menu-on {
		background: #4a4a4a;
		animation: LeftIn 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	&.menu-off {
		animation: Bounce 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
}
.burger {
	display: inline-block;
	outline: none;
}
.burger div {
	width: 20px;
	height: 2px;
	background: #999999;
	transform: rotate3d(0, 0, 0, 0);
}
.burger div:nth-child(2) {
	margin: 6px 0;
}
.menu-on {
	.burger div {
		background-color: transparent;
	}
	.burger div:first-of-type {
		top: 8px;
		transform: rotate3d(0, 0, 1, 45deg);
	}
	.burger div:last-of-type {
		bottom: 8px;
		transform: rotate3d(0, 0, 1, -45deg);
	}
	.burger div:first-of-type,
	.burger div:last-of-type {
		transition: transform 0.3s 0.3s ease, background-color 150ms ease-in;
		background: #ffffff;
	}
}
.burger div:first-of-type,
.burger div:last-of-type {
	transition: transform 0.3s 0.15s ease, background-color 0ms ease-out;
	position: relative;
}
.nav-page {
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 99;
	background: #ffffff;
	transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	transform: translateX(100%);
	text-align: center;
}
.show_page {
	transform: translateX(0);
}
.logo{
	height: 40px;
	margin-top: 80px;
	margin-bottom: 40px;
	img{
		height: 100%;
	}
}
#nav{
	.navitem{
		height: 60px;
		line-height: 60px;
		border-top: 1px solid #F5F5F5;
		box-sizing: border-box;
		position: relative;
		span{
			color: #666666;
			font-size: 14px;
		}
		.nav-a{
			display: block;
			height: 100%;
			width: 100%;
			cursor: pointer;
		}
		&:hover{
			span{
				color: #000;
			}	
		}
		&.from-top{
			animation: FromTop 0.12s linear;
			background:linear-gradient(#f8f8f8 0%, #f8f8f8 100%) no-repeat 0% 0% ~'/' 100% 100%;
		}
		&.from-bottom{
			animation: FromBottom 0.12s linear;
			background:linear-gradient(#f8f8f8 0%, #f8f8f8 100%) no-repeat 0% 0% ~'/' 100% 100%;
		}
		&.leave-top{
			animation: FromTop 0.12s linear reverse;
		}
		&.leave-bottom{
			animation: FromBottom 0.12s linear reverse;
		}
	}
}
</style>
